javascript 初学教程及五子棋小程序的简单实现


Posted in Javascript onJuly 04, 2017

一.JavaScript简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

二.hbulider工具的使用

1)

hbulider的特点:

1.飞快的编码速度

2.HBuilder直接创建移动App,打包为ios或Android原生安装包

3.HTML5语法、HTML5+语法、三大浏览器扩展语法,尽收HBuilder中

4.绿柔设置界面,更加护眼

2)

下载hbulider安装包

百度搜索hbulider,进入官方网站,点击右上角 download 按钮,即可下载。

javascript 初学教程及五子棋小程序的简单实现

4)

下载完成后可以看到下载到的是一个压缩包,打开下载的压缩包,将压缩包内的文件解压到希望存放的位置,点击确定。

javascript 初学教程及五子棋小程序的简单实现

5)

解压完成后,找到解压位置,点击hbulider.exe文件,开始安装。

javascript 初学教程及五子棋小程序的简单实现

6)打开后选择一个一般用来存放代码的文件夹作为代码目录。

javascript 初学教程及五子棋小程序的简单实现

7)根据自己的实际情况,选择所能看清楚的颜色块,然后点击下方 生成适合你的视觉方案 生成一个舒适的配色。

javascript 初学教程及五子棋小程序的简单实现

8)选择喜欢的视觉主题,点击下面的 确认并关闭 ,完成设置。

javascript 初学教程及五子棋小程序的简单实现

9)完成后进入到欢迎向导,如图,到此安装完成。

javascript 初学教程及五子棋小程序的简单实现

三.用hbulider写一个五子棋小程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>五子棋游戏</title>
  </head>
  <body>
    <canvas id="myCanvas" width="570" height="570" 
      style="border: 2px solid #abcabc"></canvas>
  
  <!--
    作者:offline
    时间:2017-07-03
    描述:使用js代码控制游戏逻辑
  -->
    <script type="text/javascript">
      //获取canvas的标签
      var ChessCanvas = document.getElementById("myCanvas");
      //获取画布
      var gameCanvas = ChessCanvas.getContext("2d");
      //定义棋盘大小
      var map = 25;
      //棋子大小
      var chessSize = 24;
       //获取下棋的坐标
       var x = y = 0;
      //棋子的颜色
      var isRed = true;//==true的该下红棋 否则下黑棋
      var color = "#000000";
      //棋子数组  二维数组
      //保存所下的棋子 0:未下;1:下红棋;2:下黑棋
      var chessData = new Array(23);
      for(var i=0;i<23;i++)
      {
        chessData[i] =new Array(23);
        for(var j=0;j<23;j++)
        {
          chessData[i][j] = 0;
        }
      }
      //所下棋子在棋子数组的位置
      var i,j;
      //绘制棋盘
      for(var i=0;i<23;i++)
      {
        gameCanvas.moveTo(10,10+i*map);
        gameCanvas.lineTo(560,10+i*map);
        gameCanvas.moveTo(10+i*map,10);
        gameCanvas.lineTo(10+i*map,560);
        gameCanvas.stroke();//画
      }
      //创建函数,完成下棋
      function addChess(x,y)
      {
        //下棋 画小圆圈   角度转弧度 π/180×角度    弧度变角度 180/π×弧度
        gameCanvas.beginPath();//开始
        gameCanvas.arc(x,y,12,0,Math.PI*2,true);//画棋子
        gameCanvas.fillStyle = color;
        gameCanvas.fill();
        gameCanvas.closePath();//结束
        if(color=="#000000")
        {
          color = "#ff0000";
          //黑棋
          chessData[i][j] = 2;
          
          
        }else{
          color = "#000000";
          //红棋
          chessData[i][j] = 1;
          
        }
        
      }
      //重复调用 在做坦克大战之类游戏  需要使用。。。。。。。
//      window.setInterval(函数,时间);
    
    

      //游戏是否结束
//      function isGameWin()
      
      //如果是人机对战版,则需要下棋的AI 如果不是人机对战 则下完棋后,提醒对方下棋
//      function gameAI() 
      
      //做鼠标监听  游戏逻辑
      document.onmousedown= function(e)
      {
        window.onclick = function (){
        
        //获取下棋的坐标
        i = Math.round((e.x-10)/25);
        j = Math.round((e.y-10)/25);//边界不能下
        //判断该位置x,y是否可以下棋
        x = i*25+10;
        y = j*25+10;
        
        //判断该位置ij是否有棋子
        if(chessData[i][j]==0)
        {
          //下棋
          addChess(x,y);
        
          
        }else{
          alert("不好意思!你来晚了,已经被对方捷足先登了");
        }
        
        
        }
      }
      
      
    </script>
    
  </body>
</html>

代码不全,会陆续加上。

以上这篇javascript 初学教程及五子棋小程序的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php URL验证正则表达式
2011/07/19 PHP
php依赖注入知识点详解
2019/09/23 PHP
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Vue开发中整合axios的文件整理
2017/04/29 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
JS实现继承的几种常用方式示例
2019/06/22 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
大学生求职信范文应怎么写
2014/01/01 职场文书
公益活动邀请函
2014/02/05 职场文书
信息技术培训感言
2014/03/06 职场文书
中药学专业求职信
2014/05/31 职场文书
离婚协议书范本
2015/01/26 职场文书
老人院义工活动感想
2015/08/07 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
如何理解及使用Python闭包
2021/06/01 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL