数字连线游戏

Html

Css

	.mathGameC {
	width:800px;
	top:0px;
	left:0px;
	padding:0px;
	height:400px;
	position:fixed;
	z-index:-1;
}
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	overflow:hidden;
}
.clearfix {
	zoom:1;
}
.mathGameC .left {
	float:left;
	width:50%;
	height:auto;
	z-index:10;
}
.mathGameC .right {
	float:right;
  
	top:0px;
	width:50%;
	height:auto;
	z-index:15
}
.mathGameC .left .content {
	width:100%;
	height:auto;
	position:relative;
	display:block;
	float:left;
	margin:20px;
}
.content img {
	width:20px;
	height:20px;
	margin:2px;
}
.mathGameC .right .contents {
   
	width:100%;
	height:auto;
	text-align:right;
	font-size:16px;
	position:relative;
	float:right;
	padding:5px;
	margin:0 20px;
}

}
 // 生成随机数的方法 
 function generateRandom(count) {
     var rand = parseInt(Math.random() * count + 1);
     for (var i = 0; i < array.length; i++) {
         if (array[i] == rand) {
             return false;
         }
     }
     array.push(rand);
 }

for (k = 0; k < 5; k++) {
     var y = arr2[k];
     var an = array[k];
     var a = Math.floor(Math.random() * 10 + 1);
     var p = document.createElement("p");
     p.innerText = a;
     var parents = document.getElementById("contents_num" + y);
     parents.appendChild(p);
     /*alert(a);*/

for (i = 0; i < a; i++) {
         var img = document.createElement("img");
         img.src = "http://www.jq22.com/img/cs/500x500-" + an + ".png";

var parent = document.getElementById("contents" + k);
         parent.appendChild(img);

}
 }
 var canvas = document.getElementById("canvasId");
 var ctx = canvas.getContext("2d");
 var flag = false;
 var tc = document.createElement("canvas");
 tc.width = canvas.width;
 tc.height = canvas.height;
 var tctx = tc.getContext("2d");
 var x = 0;
 var y = 0;
 canvas.onmousedown = function(e) {

e = e || window.event;
     x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
     y = e.clientY - canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop);
     flag = true;
     tctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
 }
 canvas.onmousemove = function(e) {
     if (!flag) return;
     e = e || window.event;
     var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
     var gy = e.clientY - canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.drawImage(tc, 0, 0, canvas.width, canvas.height);
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(gx, gy);
     ctx.stroke();
 }
 canvas.onmouseup = function(e) {
     flag = false;
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

数字连线游戏



代码描述：宝宝学数数 js数字连线游戏 canvas两点连线

这个是特意做给我家宝宝玩的连线游戏，宝宝总是让我画很多图案给他连线，累死去，于是就偷懒写了这个连线，有需要的亲可以换上图片给孩子玩，里面涉及到随机数，canvas等。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

几斗米

相关代码

数字连线游戏

最新