PROMULGATOR

    几斗米

    广东省深圳市
    Html
    Css
    Js

    

	.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 randomsort(a, b) {
     return Math.random() > .5 ? -1 : 1;
 }
 var arr = [0, 1, 2, 3, 4];
 var arr2 = arr.sort(randomsort);
 var array = new Array();
 // 循环N次生成随机数 
 for (var i = 0;; i++) {
     // 只生成10个随机数 
     if (array.length < 5) {
         generateRandom(9);
     } else {
         break;
     }
     console.log(array.length);
 }
 // 循环遍历随机数数组 
 for (var i = 0; i < array.length; i++) {

 }
 // 生成随机数的方法 
 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
 立即下载

数字连线游戏

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