JS原生2048小游戏源码分享
最近在学习算法方面的知识，看到了一个由算法主导的小游戏，这里给大家分享下代码：
效果：
代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360px,user-scalable=no" />
<title>2048小游戏</title>
<style>
body,h1,div,table,tr,td{
margin: 0px;
padding: 0px;
}
body{
background-color: rgb(0,0,0);
}
h1{
margin: 36px auto;
text-align: center;
color: rgba(255,255,255,0.7);
font-family: "楷体";
font-size: 48px;
text-shadow: 1px 2px 3px rgb(134,134,134);
}
div{
margin: 12px auto;
line-height: 60px;
}
#box{
margin-top: -24px;
width: 240px;
height: 60px;
text-align: center;
font-weight: bold;
color: rgb(255,255,255);
}
#box input{
border: 3px solid rgb(255,255,255);
border-radius: 4px;
box-shadow: 1px 2px 3px rgb(234,234,234);
}
#box input:focus{
outline-style: none;
}
table{
margin: 24px auto;
border: 3px solid rgb(255,255,255);
border-radius: 6px;
}
#random,td{
width: 60px;
height: 60px;
border: 2px solid rgb(255,255,255);
border-radius: 18px;
text-align: center;
font-weight: bold;
color: rgb(255,255,255);
}
td:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>2 0 4 8</h1>
<!-- 显示得分及新游戏按钮 -->
<div id="box">
得分: <span id="span">0</span>
<input id="but" type="button" value="新游戏" />
</div>
<!-- 显示随机数 -->
<div id="random"></div>
<!-- 游戏主要布局 -->
<table border="3px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript">
var span = document.getElementById("span");
var but = document.getElementById("but");
var td = document.getElementsByTagName("td");
//定义得分
var score = 0;
//定义随机数
var random = document.getElementById("random");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
//定义背景色数组
var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
"rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
//初始化程序,生成随机数
/* start */
function init(){
var max = maxNum();
var num = 0;
for(var i=4;i > 0;i++){
if(max < Math.pow(2,i+1)){
num = parseInt(Math.random()*i);
break;
}else if(max < 2048){
continue;
}else{
num = parseInt(Math.random()*showNums.length);
break;
}
}
random.innerHTML = showNums[num];
color(random);
showNum = showNums[num];
}
init();
/* end */ //获取棋盘中的最大值
/* start */
function maxNum(){
var max = 0;
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
max = max;
}else{
if(parseInt(td[i].innerHTML) > max){
max = parseInt(td[i].innerHTML);
}else{
max = max;
}
}
}
return max;
}
/* end */ //根据数字显示背景颜色
/* start */
function color(obj){
for(var i=0;i < colors.length;i++){
if(obj.innerHTML == Math.pow(2,i+1)){
obj.style = "background-color: "+colors[i]+";";
break;
}
}
}
/* end */ //合并算法
/* start */
function offsetTop(obj,index){//合并上
if(index > 3){
if(td[(index-4)].innerHTML == obj.innerHTML){
td[(index-4)].innerHTML = "";
td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
function offsetBottom(obj,index){//合并下
if(index < 12){
if(td[(index+4)].innerHTML == obj.innerHTML){
td[(index+4)].innerHTML = "";
td[(index+4)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
function offsetLeft(obj,index){//合并左
if(index!=0 && index!=4 && index!=8 && index!=12){
if(td[(index-1)].innerHTML == obj.innerHTML){
td[(index-1)].innerHTML = "";
td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
function offsetRight(obj,index){//合并右
if(index!=3 && index!=7 && index!=11 && index!=15){
if(td[(index+1)].innerHTML == obj.innerHTML){
td[(index+1)].innerHTML = "";
td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
/* end */ //判断单元格是否合并
/* start */
function merge(obj,index){
if(offsetTop(obj,index)){
if(offsetBottom(obj,index)){
if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、下、左、右
score += 16;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下、左
score += 8;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下
score += 4;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左
score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上
score += 2;
merge(obj,index);
}
}else if(offsetBottom(obj,index)){
if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左
score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下
score += 2;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并左、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并左
score += 2;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并右
score += 2;
merge(obj,index);
}
}
/* end */ //main
/* start */
function gameOver(){
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
break;
}
if(i == 15){
alert("很遗憾！本局游戏结束。。。");
}
}
}
/* end */ //main
/* start */
(function(){
for(var i=0;i<td.length;i++){
var choose = td[i];
choose.index = i;
choose.onclick = function(){
if(this.innerHTML == ""){
this.innerHTML = showNum;
merge(this,this.index);
if(this.innerHTML >= 2048){
this.innerHTML = "";
this.style = "background-color: rgba(0, 0, 0, 0);";
}
color(this);
init();
}
updateScore();
gameOver();
}
}
})();
/* end */ //更新得分
/* start */
function updateScore(){
if(score > 500){
span.style = "color: rgb(255,0,0)";
}else if(score > 100){
span.style = "color: rgb(255,0,255)";
}else if(score > 50){
span.style = "color: rgb(255,255,0)";
}else if(score > 20){
span.style = "color: rgb(0,0,255)";
}else if(score > 10){
span.style = "color: rgb(0,255,0)";
}
span.innerHTML = score;
}
/* end */ //新游戏
/* start */
but.onclick = function(){
location.reload();
}
/* end */ </script>
</html>
JS原生2048小游戏源码分享的更多相关文章
- Creator仿超级玛丽小游戏源码分享
Creator仿超级玛丽小游戏源码分享 之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...
- 使用JS实现2048小游戏
JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- android版猜拳游戏源码分享
android版猜拳游戏源码分享安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的 ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
- flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
- h5小球走迷宫小游戏源码
无意中找到的一个挺有意思的小游戏,关键是用h5写的,下面就分享给大家源码 还是先来看小游戏的截图 可以用键盘的三个键去控制它,然后通关 下面是源代码 <!doctype html> < ...
- flappy pig小游戏源码分析(4)——核心pig模块(未完待续)
热身之后,我们要动点真格的了,游戏叫flappy pig,我们的pig终于要出场了. 老规矩,看看目录结构,读者对着目录结构好好回想我们已经讲解的几个模块: 其中game.js是游戏主程序,optio ...
- flappy pig小游戏源码分析(3)——解剖util
这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487. 还是按照惯例看看我们的目录结构. 我们在前两节中已经分析了game.js, ...
- flappy pig小游戏源码分析(2)——解剖option
今天继续分析flappy bird的源码.重温一下源码的目录结构. 在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构.这一篇我们来看看option.js文件,这个文件的内容很简单,主 ...
随机推荐
- NC16850 [NOI1998]免费馅饼
题目链接 题目 题目描述 SERKOI最新推出了一种叫做"免费馅饼"的游戏:游戏在一个舞台上进行.舞台的宽度为W格,天幕的高度为H格,游戏者占一格.开始时游戏者站在舞台的正中央,手 ...
- 从零开始手写 mybatis（二）mybatis interceptor 插件机制详解
前景回顾 第一节 从零开始手写 mybatis(一)MVP 版本 中我们实现了一个最基本的可以运行的 mybatis. 常言道,万事开头难,然后中间难. mybatis 的插件机制是 mybatis ...
- STM32F407VET6 / BLACK_F407VE开发板间隔0.5秒不断重启
有一块 STM32F407VET6 的故障开发板, 之前的问题是经常无法烧录, 必须reset之后才能连接, 具体查看这篇 STM32F407VET6烧录出现flash download failed ...
- 立创EDA使用笔记
立创EDA 在立创EDA上制作的PCB可以直接导入到嘉立创下单, 每个注册用户每个月可以下两个免费订单, 限制PCB尺寸10CMx10CM, 每单五片, 连制作到快递全部免费, 非常适合做样板. 立创 ...
- 执行shell脚本过程中传递参数
假设我有一个shell脚本install.sh,在运行过程中需要终端输入一条指令才能继续执行,例如程序询问是否删除某文件,终端需要输入Y/N.采用下面的方式可以实现自动输入参数,无需人工干预: ech ...
- 全栈式测试平台RunnerGo核心功能模块-接口管理
全栈式测试平台RunnerGo相对于市面上其他性能测试产品来说更简单,它不用其他相关配件,天然支持分布式,有单独的机器做分布式的负载均衡,自有一套智能算法算压力机的配置从而平均分配,并从场景链路的流 ...
- node版本管理工具nvm的安装及使用
一.什么是nvm nvm是一个node版本管理工具. 由于不同项目依赖的node版本可能不同,所以在维护多个项目时通常需要使用不同的node版本,这时候用nvm来切换不同的node版本就很方便. 官方 ...
- java数组实现的超市管理系统（控制台）
说明:使用数组存储数据,针对用户功能1:增加用户2:删除用户3:修改用户:针对商品功能:1.显示所有商品2.修改商品信息3.添加商品信息4.删除商品信息5.查询商品信息 效果展示 ========== ...
- 第一百一十六篇: JavaScript理解对象
好家伙,本篇为<JS高级程序设计>第八章"对象.类与面向对象编程"学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合.严格来说,这意味着对象就是 ...
- 【Azure Developer】在微软云中国区，如何使用Microsoft GraphAPI连接到B2C Tenant
问题描述 如题所述,当在中国区使用Microsoft GraphAPI连接B2C Tenant时候,如何来设置中国区的Endpoint呢?在GitHub的示例中,并没有示例介绍如何连接中国区.如 问题 ...