JS实现2048代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cwl's 2048</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #5ad9ff;
}
</style>
</head>
<body>
<script> function canvas_node() {
/**
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50); ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill(); */
} function rand_num(l,r) {
l = Math.min(l,r);
r = Math.max(l,r);
return Math.floor(Math.random()*(r-l+1)+l);
} function draw_num(num,x,y,x0,y0) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "black";
ctx.font = "30px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle"
ctx.fillText(num.toString(),x0+x*100+40,y0+y*100+40,100);
} function show_map(arr) {
var ctx = document.getElementById('canvas').getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var x0 = width/2 - 200;
var y0 = window.innerHeight/5;
ctx.fillStyle = "#8ece44";
ctx.fillRect(x0-25,y0-25,430,430);
ctx.fillStyle = "#ffe945";
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
ctx.fillRect(x0+i*100,y0+j*100,80,80);
}
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j]!=0) {
draw_num(arr[i][j],i,j,x0,y0);
}
}
}
} function init_game() {
var arr = new Array(4);
for(var i = 0; i < 4; i ++ ) {
arr[i] = new Array(4);
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
arr[i][j] = 0;
}
}
new_num(arr);
new_num(arr);
show_map(arr);
return arr;
} function new_num(arr) {
var ok = 0;
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(!arr[i][j]) {
ok = 1;
}
}
if(ok) {
break;
}
}
while(ok) {
var x = rand_num(0,3);
var y = rand_num(0,3);
var t = rand_num(1,2);
if(arr[x][y] == 0) {
arr[x][y] = t*2;
break;
}
}
} function is_end(arr) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j] == 0) {
return false;
}
else {
for(var k = 0; k < 4; k ++ ) {
var next_x = i + xx[k];
var next_y = j + yy[k];
if(is_in(next_x,next_y) && arr[next_x][next_y] == arr[i][j]) {
return false;
}
}
}
}
}
return true;
} function is_in(x,y) {
return x >= 0 && y >= 0 && x < 4 && y < 4;
} function join(arr,dir,x,y) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
var flag = 0;//判断是否能继续合并
while(is_in(x,y)) {
var next_x = x+xx[dir];
var next_y = y+yy[dir];
if(!is_in(next_x,next_y)) {
break;
}
if(arr[next_x][next_y] == 0) {
arr[next_x][next_y] = arr[x][y];
arr[x][y] = 0;
}
else if(arr[next_x][next_y] == arr[x][y] && !flag) {
arr[next_x][next_y] *= 2;
arr[x][y] = 0;
flag = 1;
}
else break;
x = next_x;
y = next_y;
} } function change(arr,dir) {
if(dir == 2) { // up
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 3) { //down
for(var i = 0; i < 4; i ++ ) {
for(var j = 3; j >= 0; j -- ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 0) {
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 1) {
for(var i = 3; i >= 0; i -- ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
//console.log(arr);
if(is_end(arr)) {
alert("end");
return 1;
}
new_num(arr);
show_map(arr);
return 0;
} function main() {
document.body.style.overflow="hidden";
var can = document.createElement('canvas');
can.id = "canvas";
can.width = window.innerWidth;
can.height = window.innerHeight;
document.body.appendChild(can);
var arr = init_game(); var keyIsDown = 0; window.addEventListener('mousemove', function(event) {
console.log(event)
}) window.addEventListener('keydown',function(event){
var key = event.keyCode;
var ret = 0;
if(keyIsDown == 0) {
keyIsDown = 1;
if(key == 38) {//up
ret = change(arr,2);
}
else if(key == 40) {//down
ret = change(arr,3);
}
else if(key == 37) {//left
ret = change(arr,0);
}
else if(key == 39) {//right
ret = change(arr,1);
}
if(ret) {
arr = init_game();
show_map(arr);
}
}
}) window.addEventListener('keyup',function(){
keyIsDown = 0;
}) window.onresize = function()
{
var can = document.getElementById("canvas");
var height = window.innerHeight;
var width = window.innerWidth;
can.height = height;
can.width = width;
show_map(arr);
}
}
main();
</script>
</body>
</html>
2048
JS实现2048代码的更多相关文章
- 使用JS实现2048小游戏
JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
- JS Nice – JavaScript 代码美化和格式化工具
JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...
- ios-UIWebView中js和oc代码的互调
webview是ios中显示远程数据的网页控件,webview能显示的内容很多,MP4.文本.pdf等等: 关于js和oc代码的互相调用 1:oc中调用js代码; >>oc中调用js代码很 ...
- 关于JS的一些代码效果图
关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...
- js基础 - 兼容代码
js基础 - 兼容代码 . scrollTop . chrome document.body.scrollTop . IE && firefox document.documentEl ...
- [转]Asp.Net调用前台js调用后台代码分享
1.C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> ...
- JS软键盘代码
页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
- asp.net调用前台js调用后台代码分享
asp.net调用前台js调用后台代码分享 C#前台js调用后台代码前台js<script type="text/javascript" language="jav ...
随机推荐
- 洛谷P1209-最大公约数与最小公倍数问题
一个萌新的成长之路 Discription 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P, ...
- js的处理技巧
目前来说,处理js有两种方法: 1,通过第三方工具执行js脚本, selenium,会驱动浏览器把js全部加载出来并返回. 2,手动模拟js的执行 2.1)找到js链接,可以在idle中用print( ...
- urlopen()&urlretrieve()
1.urlopen()方法 urllib.request.urlopen(url[,data[,proxies]]) 创建一个表示远程url的类文件对象,然后像本地文件一样的操作这个类文件对象来获取远 ...
- django 开发忘记密码通过邮箱找回功能
一.流程分析: 1.点击忘记密码====>forget.html页面,输入邮箱和验证码,发送验证链接网址的邮件====>发送成功,跳到send_success.html提示 2.到邮箱里找 ...
- laypage分页控件使用方法
laypage是一款非常简单易用的分页控件,由于最近项目中使用到了,简单记录一下使用方法 1.引入laypage所需的js和css文件 <link href="js/laypage/1 ...
- 【Python3.6+Django2.0+Xadmin2.0系列教程之二】学生信息管理系统（入门篇）
上一篇我们已经创建好了一个Xadmin的基础项目,现在我们将在此基础上构建一个同样很基础的学生信息管理系统. 一.创建模型 模型是表示我们的数据库表或集合类,并且其中所述类的每个属性是表或集合的字段, ...
- 谈一谈泛型（Generic）
谈一谈泛型 首先,泛型是C#2出现的.这也是C#2一个重要的新特性.泛型的好处之一就是在编译时执行更多的检查. 泛型类型和类型参数 泛型的两种形式:泛型类型( 包括类.接口.委托和结构 没有泛型枚 ...
- bzoj 1272: [BeiJingWc2008]Gate Of Babylon
Description Solution 如果没有限制,答案就是 \(\sum_{i=0}^{m}C(n+i-1,i)\) 表示枚举每一次取的个数,且不超过 \(m\),方案数为可重组合 发现这个东西 ...
- 【poj 1087 a plug for UNIX】
在大米饼的帮助下,终于找到了大米饼程序中如同大米饼一般的错误! 考点在问题转化,然后就跑一个你喜欢的最大流算法(二分图可以啵?) 再来一个例子吧: [纯手绘大米饼图片] 其中有的边权是1,否则就是in ...
- [bzoj4822][Cqoi2017]老C的任务&[bzoj1935][Shoi2007]Tree 园丁的烦恼
来自FallDream的博客,未经允许,请勿转载,谢谢. 老 C 是个程序员. 最近老 C 从老板那里接到了一个任务——给城市中的手机基站写个管理系统.作为经验丰富的程序员,老 C 轻松地完成 ...