少兒編程教學環(huán)境開發(fā)之代碼實戰(zhàn)篇?mp.weixin.qq.com

之前架構選型篇許諾要上自己原型demo的界面圖，先把這個許諾給實現了，首先聲明，這只是技術原型demo，比起http://code.org的產品來講簡陋很多：

首先對代碼的整體架構做一下說明，首先我們采用的是Vue SPA框架為整個站點的前端框架，這樣編輯器界面和游戲窗口界面各自被封裝成Component。

下面先上右側BlocklyEditor Component的的代碼，代碼解讀就直接放到代碼注釋中了

<template><div><div id="blocklyDiv" style="position: absolute"></div><!--上面的blockDvi主要是容器插槽用來放置編輯器--><xml id="toolbox" style="display: none"><block type="string_length"></block><block type="controls_if"></block><block type="logic_compare"></block><block type="controls_repeat_ext"></block><block type="math_number"><field name="NUM">123</field></block><block type="math_arithmetic"></block><block type="text"></block><block type="text_print"></block></xml><!--上面的xml主要是定制block工具欄列表--></div> </template><script>import Blockly from 'blockly'//下面這個代碼塊用來定制string_length block的形狀Blockly.Blocks['string_length'] = {init: function() {this.jsonInit({"message0": '%1',"args0": [{"type": "field_image","src": "/assets/logo.png","width": 100,"height": 50,"alt": "*"}],"nextStatement": "Action","fillPattern":"#","colour": 160,"tooltip": "Returns number of letters in the provided text.","helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"});}};//下面這個代碼塊用來定制string_length block的行為函數// eslint-disable-next-line Blockly.JavaScript['string_length'] = function(block) {// String or array length.//var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',// Blockly.JavaScript.ORDER_FUNCTION_CALL) || '''';var argument0= "begin"return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];};export default {name: "BlocklyEditor",mounted() {//在component的這個生命周期事件上初始化整個編輯器this.$nextTick(function () {var blocklyArea = document.getElementById("app");var blocklyDiv = document.getElementById('blocklyDiv');//往blocklyDiv容器插槽中插入blockly編輯器var demoWorkspace = Blockly.inject(blocklyDiv,{media: '/assets/blockly_media/',trashcan:true,grid:{spacing: 20,length: 20,colour: '#ccc',snap: true},toolbox: document.getElementById('toolbox')});//定義編輯器響應resize事件的函數，里面邏輯順便完成了編輯器的形狀設置// eslint-disable-next-linevar onresize = function(e) {// Compute the absolute coordinates and dimensions of blocklyArea.var element = blocklyDiv;// eslint-disable-next-linevar x = 0;var y = 0;do {x += element.offsetLeft;y += element.offsetTop;element = element.offsetParent;} while (element);// Position blocklyDiv over blocklyArea.blocklyDiv.style.left = 436 + 'px';blocklyDiv.style.top = y + 'px';blocklyDiv.style.width = blocklyArea.offsetWidth -470 + 'px';blocklyDiv.style.height = blocklyArea.offsetHeight-125 + 'px';Blockly.svgResize(demoWorkspace);};window.addEventListener('resize', onresize, false);onresize();Blockly.svgResize(demoWorkspace);})}} </script>

下面上左側phaser.js游戲窗口的的代碼

<template><div><!--下面這個div是游戲界面的插槽容器--><div id="phaser-wraper"></div><div><button type="button" class="btn btn-primary">運行 <i class="fas fa-play"></i></button></div></div> </template><script>import Phaser from "phaser"var playervar platforms//這個函數中完成游戲資源的預加載function preload () {//this.load.setBaseURL('Phaser 3 Examples');//this.load.image('logo', 'assets/sprites/phaser3-logo.png');//this.load.image('red', 'assets/particles/red.png');this.load.setBaseURL('/');this.load.image('sky', 'assets/sky.png');this.load.image('ground', 'assets/platform.png');this.load.multiatlas('citizen', 'assets/side_walk.json', 'assets');this.load.multiatlas('front', 'assets/front.json', 'assets');}//這個函數完成游戲場景的初始化function create () {var that = this;this.add.image(200, 200, 'sky');platforms = this.physics.add.staticGroup();platforms.create(200, 400, 'ground').setScale(1).refreshBody();player = this.physics.add.sprite(215, 215, 'citizen', '0_Citizen_Walk_003.png');player.setBounce(0.2);player.setCollideWorldBounds(true);this.anims.create({key: 'turn',frames: that.anims.generateFrameNames('front', {start: 1, end: 1, zeroPad: 2,prefix: '0_Citizen_Walk_0', suffix: '.png'}),frameRate: 20});this.anims.create({key: 'down',frames: that.anims.generateFrameNames('front', {start: 1, end: 28, zeroPad: 2,prefix: '0_Citizen_Walk_0', suffix: '.png'}),frameRate: 20});this.anims.create({key: 'left',frames: that.anims.generateFrameNames('citizen', {start: 1, end: 28, zeroPad: 2,prefix: '0_Citizen_Walk_0', suffix: '.png'}),frameRate: 10,repeat: -1});this.anims.create({key: 'right',frames: that.anims.generateFrameNames('citizen', {start: 1, end: 28, zeroPad: 2,prefix: '0_Citizen_Walk_0', suffix: '.png'}),frameRate: 10,repeat: -1});this.physics.add.collider(player, platforms);}//這個函數完成游戲中事件行為函數的編寫，完成游戲的操作交互功能// eslint-disable-next-linefunction update(time, delta) {var cursors = this.input.keyboard.createCursorKeys();if (cursors.left.isDown){player.setVelocityX(-160);player.anims.play('left', true);player.setFlipX(false)}else if (cursors.right.isDown){player.setVelocityX(160);player.anims.play('right', true);player.setFlipX(true)}else if (cursors.down.isDown){player.setVelocityY(160);player.anims.play('down', true);player.setFlipX(false)}else if (cursors.up.isDown){player.setVelocityY(-160);player.anims.play('down', true);player.setFlipX(false)}else{player.setVelocityX(0);player.setVelocityY(0);player.anims.play('turn');}//player.update(delta)}export default {name: "Phaser",mounted() {//在vue組件的這個生命周期中完成整體游戲場景的初始化和加載this.$nextTick(function () {var config = {type: Phaser.AUTO,parent:"phaser-wraper",width: 400,height: 400,physics: {default: 'arcade',arcade: {gravity: { y: 0 }}},scene: {preload: preload,create: create,update: update,}};// eslint-disable-next-linevar game = new Phaser.Game(config);})}} </script>

架構選型篇之后許諾的代碼實戰(zhàn)篇憋了好久了都沒放出來，主要是代碼注解一直懶得搞，讓大家久等了。

總結

以上是生活随笔為你收集整理的代码编程教学_少儿编程教学环境开发之代码实战篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。