Place the 12 numbers according to their properties:
数字拼图 - 数字属性:
根据属性放置 12 个数字：
//var n=1;
//initial settings
var min1=1;
var max1=2;
var min2=12;
var max2=50;
var GONews;
function setHTML(id,text){
var e=document.getElementById(id);
if (e==null) return;
e.innerHTML=text;
}
class Movable {
static DOWN=1;
static UP=2;
static mouse=2;
static x1=0;
static y1=0;
static ctx;
static list=new Array();
static selected=null;
constructor(x,y){
this.x0=x;
this.y0=y;
}
inside(x,y){
return true;
}
draw (ctx1){
;
}
move (e){
var dx=e.offsetX-Movable.x1;
var dy=e.offsetY-Movable.y1;
this.x0+=dx;
this.y0+=dy;
Movable.x1=e.offsetX;
Movable.y1=e.offsetY;
this.draw(Movable.ctx);
}
static mouseUp() {
Movable.mouse=Movable.UP;
}
static mouseDown(e) {
Movable.mouse=Movable.DOWN;
Movable.x1=e.offsetX;
Movable.y1=e.offsetY;
}
static isMouseDown() {
if (Movable.mouse==Movable.DOWN)
return true;
return false;
}
static isInside (e){
for (var i=0;i=0 && x<=this.w && y>=0 &&y<=this.h)
return true;
return false;
}
draw (ctx){
ctx.fillStyle="blue";
ctx.fillRect(this.x0, this.y0, this.w, this.h);
;
}
}
class MyCircle extends Movable {
constructor (xx,y,r,id){
super (xx,y);
this.r=r;
//this.h=h;
this.id=id;
}
setlocation (x,y){
this.x0=x;
this.y0=y;
}
inside(x,y){
x-=this.x0;
y-=this.y0;
var r=this.r;
if((x*x+y*y)<(r*r))
return true;
return false;
}
draw (ctx){
ctx.strokeStyle="black";
ctx.beginPath();
//ctx.arc(this.x0, this.y0, this.r,0,2*Math.PI);
ctx.fillStyle="red";
ctx.font="20px Arial";
ctx.textAlign = "center";
ctx.fillText(""+this.id,this.x0, this.y0+7);
ctx.stroke();
}
}
class MyContainer {
constructor (x,y,r,type, color){
this.x0=x;
this.y0=y;
this.r=r;
this.type=type;
this.color=color;
}
inside(x,y){
x-=this.x0;
y-=this.y0;
var r=this.r;
if((x*x+y*y)<(r*r))
return true;
return false;
}
draw (ctx){
ctx.strokeStyle=this.color;
ctx.beginPath();
ctx.arc(this.x0, this.y0, this.r,0,2*Math.PI);
ctx.stroke();
}
isOK(n){
if (this.inside(n.x0,n.y0)==false)
return 0;
var re=0;
switch (this.type) {
case 1:
if (n.id%2==1)
re= 1;
break;
case 2:
if (n.id%2==0)
re= 1;
break;
case 3:
if (n.id%3==0)
re= 1;
break;
}
}
}
function doMouseDown(event) {
//alert("mouse is down");
//var m=document.getElementById("mouseInfo");
//m.innerHTML="mouse is down";
Movable.mouseDown(event);
Movable.isInside(event);
}
function doMouseUp(event) {
// if (hButton.inside(event.offsetX, event.offsetY)===true)
// redraw(ctx);
//alert("mouse is up");
//var m=document.getElementById("mouseInfo");
//m.innerHTML="mouse is up";
Movable.mouseUp();
//Movable.positionOK();
gameType(n);
}
function doMouseMove(event) {
//alert("mouse is up");
//var m=document.getElementById("mouseInfo");
//m.innerHTML="mouse is moving: ("+event.offsetX+", "+event.offsetY+")";
if (Movable.isMouseDown() && Movable.moveSelected(event)) {
redraw(Movable.ctx);
}
}
function doMouseWheel(event) {
//alert("mouse is up");
//var m=document.getElementById("mouseInfo");
//m.innerHTML="mouse is wheeling: ("+event.offsetX+", "+event.offsetY+")";
}
function initCanvas(canvasName) {
var canvas = document.getElementById(canvasName);
canvas.addEventListener('mousedown',doMouseDown,false);
canvas.addEventListener('mouseup',doMouseUp,false);
canvas.addEventListener('mousemove',doMouseMove,false);
canvas.addEventListener('mousewheel',doMouseWheel,false);
//document.addEventListener('keydown',doKeyDown);
//document.addEventListener('keyup', doKeyUp);
return canvas;
}
function redraw(ctx) {
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
//ctx.arc(0,0,50,0,2*Math.PI);
Movable.redraw();
// showHint();
// hButton.draw();
if (lang==0){
if (n==1){
setHTML("c1","The odd numbers go in the blue circle");
setHTML("c2","The even numbers go in the red circle");
setHTML("c3","and the numbers that are divisible by three go in the green circle");
}else if (n==2){
setHTML("c1","The odd numbers go in the blue circle");
setHTML("c2","The even numbers go in the red circle");
setHTML("c3","and the numbers that are divisible by four go in the green circle");
}
}else{
if (n==1){
setHTML("c1","奇数进入蓝色圆圈");
setHTML("c2","偶数在红色圆圈中");
setHTML("c3","可以被三整除的数字在绿色圆圈中");
}else if (n==2){
setHTML("c1","奇数进入蓝色圆圈");
setHTML("c2","偶数在红色圆圈中");
setHTML("c3","可以被四整除的数字在绿色圆圈中");
}
}
Container1.draw(ctx);
Container2.draw(ctx);
Container3.draw(ctx);
if (GONews==1){
if (lang==0){
Movable.ctx.fillText ("Good job!!! Try next quesiton?",500,50);
}else{
Movable.ctx.fillText ("恭喜成功!!! 尝试下一个问题?",500,50);
}
}
}
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function getRandomPara(){
n=getRndInteger(min1,max1);
randomNum=getRndInteger(min2,max2);
var id=new Array();
var x=0;
var err;
for (i=0;i<13;i++){
id[i]=x;
}
for (i=0;i<12;i++){
for (k=1;k<100;k++){
err=0;
var ik=Math.floor(Math.random() * randomNum)+2;
for (j=0;j<12;j++){
if(id[j]==ik) err=1;
}
if (err==0) break;
}
id[i]=ik;
}
//============================
Movable.list=new Array();
var k=0;
for (i=1;i<4;i++)
for (j=1;j<5;j++) {
Movable.add(new MyCircle((j)*50,(i)*50,20,id[k++]));
}
//====
}
function getURLpara() {
var para=window.location.search;
var i;
if ( (i=para.indexOf("&p="))<0 &&
(i=para.indexOf("?p="))<0)
return [];
var tok=para.substring(i+3).split(/[=,]+/);
return tok;
}
//======= initializing ========
var canvas=initCanvas("myCanvas");
var ctx = canvas.getContext("2d");
Movable.ctx=ctx;
var n=0;
var randomNum = 0;
var ss=getURLpara();
if (ss.length==4) {
//N=parseInt(ss[0]);
min1=parseInt(ss[0]);
max1=parseInt(ss[1]);
min2=parseInt(ss[2]);
max2=parseInt(ss[3]);
}
//var n=getRndInteger(min1,max1);
//var randomNum=getRndInteger(min2,max2);
var Container1=new MyContainer (450,300,100,1,"blue");
var Container2=new MyContainer (600,300,100,2,"red");
var Container3=new MyContainer (525,200,100,3,"green");
getRandomPara();
redraw(ctx);
showOrHide('foot',lang);
showOrHide('title',lang);
) processed by MyLexV4 -->