纯JS写的2048游戏，分享之
这几天玩儿着2048这个游戏，突然心血来潮想练习下敲代码的思路。于是乎就模仿做了一个，到眼下位置还没有实现动态移动，不是非常好看，只是玩儿着自己模仿的小游戏还是蛮爽的，哈哈
假设没有玩儿过这个游戏，最好先试玩儿下，这样看起下边的代码来easy些
用的是event。临时不支持firefox下玩儿。。。
试玩儿>>
里边好多步骤写得不够简单介绍明了。欢迎指正
两个小时构思，主要构思用什么形式存表格，以及当中用到的几个比較关键的方法，比方：是否须要移动，是否须要合并，移动方法。合并方法等，然后開始编程的时候会遇到非常多问题，慢慢解决之
<html>
<head>
<title>2048</title>
<meta http-equiv='content-type' content='text/html;charset=gb2312' />
<style type="text/css">
body,div,ul,li,p{padding:0;margin:0;border-radius:10px;}
body{
font-family:"Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
background:#FFFCEC;
}
.game_box{
margin:20px auto;
width:400px;
}
.info{
height:60px;
color:#333;
font-size:32px;
}
.main_box{
border:2px solid #8E8E8E;
background-color:#8E8E8E;
height:396px;
color:#333;
font-size:36px;
font-weight:700;
text-align:center;
line-height:100px;
}
.main_box li{
float:left;
background:#d0d0d0;
border:4px solid #8E8E8E;
height:91px;
width:91px;
}
.rule{
color:#333;
font-size:16px;
}
</style>
</head>
<body onload="init();" onkeyup="run();">
<div class="game_box">
<div class="info">
<p style="float:right;">得分：<span id="score">0</span></p>
最大值：<span id="max_value">0</span>
</div>
<ul class="main_box">
<li id="11"></li>
<li id="12"></li>
<li id="13"></li>
<li id="14"></li>
<li id="21"></li>
<li id="22"></li>
<li id="23"></li>
<li id="24"></li>
<li id="31"></li>
<li id="32"></li>
<li id="33"></li>
<li id="34"></li>
<li id="41"></li>
<li id="42"></li>
<li id="43"></li>
<li id="44"></li>
</ul>
<div style="clear:both;"></div>
<p class="rule">玩法：</p>
<p class="rule">1.用键盘上下左右键控制数字走向</p>
<p class="rule">2.当点击了一个方向时，格子中的数字会所有往那个方向移动。直到不能再移动，假设有同样的数字则会合并</p>
<p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p>
</div>
</body>
<script type="text/javascript">
var table = {
11:0,12:0,13:0,14:0,
21:0,22:0,23:0,24:0,
31:0,32:0,33:0,34:0,
41:0,42:0,43:0,44:0
};//整个表格
var cur_queue = null;//因为移动时是一行或一列移动的，此变量代表须要处理的当前行和列
var direction = 0;//当前操作移动的方向
var max_value = 0;//最大值
var score = 0;//最高分数 function is_num_exist() {//推断当前处理行（列）是否有数字。有则进行处理。无则不用处理
return table[cur_queue[1]]||table[cur_queue[2]]||table[cur_queue[3]]||table[cur_queue[4]];
} function need_move() {//当前行（列）是否须要移动（不包含合并）
if(Boolean(table[cur_queue[4]])>=Boolean(table[cur_queue[3]])&&Boolean(table[cur_queue[3]])>=Boolean(table[cur_queue[2]])&&Boolean(table[cur_queue[2]])>=Boolean(table[cur_queue[1]])) {
return false;
}else {
return true;
}
} function need_merge() {//当前行（列）是否须要合并
if((table[cur_queue[4]]==table[cur_queue[3]])&&table[cur_queue[4]]&&table[cur_queue[3]]||(table[cur_queue[3]]==table[cur_queue[2]])&&table[cur_queue[3]]&&table[cur_queue[2]]||(table[cur_queue[2]]==table[cur_queue[1]])&&table[cur_queue[2]]&&table[cur_queue[1]]) {
return true;
}else {
return false;
}
} function move() {//对当前行（列）的数字进行移动
for(var i=4;i>=2;i--) {
if(Boolean(table[cur_queue[i]]<Boolean(table[cur_queue[i-1]]))) {
table[cur_queue[i]] = table[cur_queue[i-1]];
table[cur_queue[i-1]] = 0;
break;
}
}
} function merge() {//对当前行（列）的数字进行合并
for(var i=4;i>=2;i--) {
if(table[cur_queue[i]]==table[cur_queue[i-1]]) {
score=score+table[cur_queue[i]];
table[cur_queue[i]] = table[cur_queue[i]]+table[cur_queue[i-1]];
table[cur_queue[i-1]] = 0;
document.getElementById("score").innerHTML=score;//更新最高分
break;
}
}
} function run() {//点击上下左右键时開始运行
var done = false;
if(event.keyCode>=37&&event.keyCode<=40) {//仅仅有
set_direction();//设置移动方向參数
for(var i=1;i<=4;i++) {//因为一个方向上移动时有4行（列）所以须要逐行处理
set_cur_queue(i);//设置当前行（列）
if(is_num_exist()) {
if(need_move()||need_merge()) {
done = true;//此变量用来限制每次仅仅合并一次
}
while(need_move()) {//假设能够移动则一直移动
move();
}
if(need_merge()) {//假设须要合并
if(table[cur_queue[1]]==table[cur_queue[2]]&&table[cur_queue[3]]==table[cur_queue[4]]) {//特例，当一行（列）上四个数字所有同样时候，进行两次合并
merge();
while(need_move()) {
move();
}
merge();
}else {
merge();
while(need_move()) {
move();
}
}
}
}
}
//var empty_box = find_empty_box();//获取当前空格子集合
//if(empty_box.length==0&&!need_merge()) {//假设没有没有空位且不能合并
// alert('Game over');
// return;
//}
if(done) {//假设此次有移动或合并，即有效操作，则生成新的数字
create_and_set_num();
}
update_max_value();//更新最大值
draw();//又一次绘制表格用于显示
}
} function update_max_value() {
max_value = Math.max(table[11],table[12],table[13],table[14],table[21],table[22],table[23],table[24],table[31],table[32],table[33],table[34],table[41],table[42],table[43],table[44]);
document.getElementById("max_value").innerHTML=max_value;
} function set_cur_queue(queue_num) {
if(direction == 37) {
cur_queue = {1:queue_num*10+4,2:queue_num*10+3,3:queue_num*10+2,4:queue_num*10+1};
}else if(direction == 38) {
cur_queue = {1:40+queue_num,2:30+queue_num,3:20+queue_num,4:10+queue_num};
}else if(direction == 39) {
cur_queue = {1:queue_num*10+1,2:queue_num*10+2,3:queue_num*10+3,4:queue_num*10+4};
}else if(direction == 40) {
cur_queue = {1:10+queue_num,2:20+queue_num,3:30+queue_num,4:40+queue_num};
}else {
cur_queue = {1:queue_num*10+1,2:queue_num*10+2,3:queue_num*10+3,4:queue_num*10+4};
}
} function draw() {//总体刷新16个格子
for(var i=10;i<=40;i+=10) {
for(var j=1;j<=4;j++) {
if(table[i+j]!=0) {
document.getElementById(i+j).innerHTML=table[i+j];
}else {
document.getElementById(i+j).innerHTML='';
}
}
}
} function set_direction() {//设置此次移动的方向
direction = event.keyCode;
} function set_new_num(empty_box) {//生成新的数字
var num = 0;
var ranNum = Math.random()*100;
if(ranNum>80) {
num = 4;
}else {
num = 2;
}
var box_num = Math.floor(Math.random()*(empty_box.length));
table[empty_box[box_num]] = num;
} function find_empty_box() {//获得所有的空格子。即值为0的格子集合
var empty_box = [];
for(var num in table) {
if(table[num]==0) {
empty_box.push(num);
}
}
return empty_box;
} function init() {
create_and_set_num();
for(var i=1;i<=4;i++) {
set_cur_queue(i);
draw();
}
update_max_value();
} function create_and_set_num() {
var empty_box;
empty_box = find_empty_box();
set_new_num(empty_box);
}
</script>
</html>
如需转载，请注明作者及出处。
纯JS写的2048游戏，分享之的更多相关文章
- JavaScript中纯JS写21点游戏
// 21点游戏 分为人机对战和人人对战 // 玩家每次抽一张牌 牌的点数为1-10点随机数 谁更接近21点谁就获胜 let readline = require("readline-syn ...
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- 280行代码：Javascript 写的2048游戏
2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.最好还是就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算 ...
- 使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
- 用html5 canvas和JS写个数独游戏
为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- 纯JS写出日历
封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...
随机推荐
- 【BZOJ 3881】【COCI 2015】Divljak
http://www.lydsy.com/JudgeOnline/problem.php?id=3881 好难的一道题啊qwq 一开始我想对T建AC自动机,根本不可做. 正解是对S建AC自动机. fa ...
- 【DP+树状数组】BZOJ1264-[AHOI2006]基因匹配Match
[题目大意] 给定n个数和两个长度为n*5的序列,两个序列中的数均有1..n组成,且1..n中每个数恰好出现5次,求两个序列的LCS. [思路] 预处理每个数字在a[i]中出现的五个位置.f[i]示以 ...
- JDK源码学习笔记——String
1.学习jdk源码,从以下几个方面入手: 类定义(继承,实现接口等) 全局变量 方法 内部类 2.hashCode private int hash; public int hashCode() { ...
- lib_chan库学习
-module(lib_chan_cs). %% 实现服务器端结构和机制的模块 -export([start_raw_server/4, start_raw_client/3]). -export([ ...
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
- github之怎么上传本地项目
github之怎么上传本地项目 以前都是在自己磁盘上的某个目录下,然后打开git bash,来进行把本地的一些文件推到远程github上. 之前的方法步骤: 1.在github上new一个库,然后gi ...
- 星际争霸 虚空之遗 人族5BB 操作流程
人族5BB rush timing 3min-3min30 一波战术,对面双开不侦察应该就GG了. 14农民BS,建议在第一个BS后的100矿,马上接上一个BS堵口,基本上对面是侦察不到的,特别是内双 ...
- subline text 常用插件
C语言 Alignment c Improved cool format doc Blocker cTags AllAutoComplete wakatime 精确统计你再 ...
- android 检查能否上网
文章一: 首先在,AndroidManifest.xml 中增加访问权限: <uses-permission android:name="android.permission.ACCE ...
- C,C++开源项目中的100个Bugs
俄罗斯OOO Program Verification Systems公司用自己的静态源码分析产品PVS-Studio对一些知名的C/C++开源项目,诸如Apache Http Server.Chro ...